<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>英雄列表</title>
  <link rel="stylesheet" href="./css/herolist.css">
</head>
<body>
  <div class="main">
    <div id="app">
      <ul class="tab-types">
        <li class="current"><a href="javascript:;">英雄</a></li>
        <li><a href="javascript:;">局内道具</a></li>
        <li><a href="javascript:;">召唤师技能</a></li>
      </ul>
      <div class="radio-container">
        <div class="types-left">定位</div>
        <div class="types-right">
          <ul class="types-ms">
            <li v-for="(item,index) in tabTypes" @click="typeHero(item.type,index)">
              <span>
                <i :class="{active:currentType===index}"></i>
              </span>
              <label>{{item.name}}</label>
            </li>
          </ul>
          <div class="search">
            <input type="search" v-model="keyword" @input="search" placeholder="请输入英雄的名称">
          </div>
        </div>        
      </div>
      <div class="hero-list">
        <ul>
          <li v-for="(item,index) in temp">
            <a href="javascript:;">
              <img :src="item.ename | toSrc" alt="">
              <span>{{item.cname}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
<script src="./js/vue.min.js"></script>
<script src="./js/herolist.js"></script>
<script>
  var vm = new Vue({
    el : '#app',
    data :{
      keyword:'',
      currentType:0,
      tabTypes:[
        {
          type:0,
          name : '全部'
        },
        {
          type:3,
          name : '坦克'
        },
        {
          type:1,
          name : '战士'
        },
        {
          type:4,
          name : '刺客'
        },
        {
          type:2,
          name : '法师'
        },
        {
          type:5,
          name : '射手'
        },
        {
          type:6,
          name : '辅助'
        }
      ],

      heroList,
      temp:[]
    },
    created(){
      this.temp = this.heroList.reverse()
    },
    methods:{
      typeHero(type,index){
        this.currentType = index;
        if(type !== 0){
          this.temp = this.heroList.filter(e=>e.hero_type === type || e.hero_type2 === type)
        }else {
          this.temp = this.heroList;
        }
      },
      search(){
        this.temp = this.heroList.filter(e=>e.cname.includes(this.keyword))
      }
    },
    filters:{
      toSrc(val){
        return `./heroimg/${val}.jpg`;
      }
    }
  })
</script>
</html>